<!--
 * @Author: panda-hbd 1511539537@qq.com
 * @Date: 2022-11-14 19:29:36
 * @LastEditors: panda-hbd 1511539537@qq.com
 * @LastEditTime: 2022-11-19 14:38:23
 * @FilePath: \text-online-system2\src\components\WorkItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="box" @click="dialogVisible = true">
    <div class="left">
      <div>
        <h4>数据结构 第一章作业</h4>
        <div>
          <ul>
            <li>满分：<i>10</i>分</li>
            <li>|</li>
            <li>共<i>27</i>题</li>
            <li>|</li>
            <li>截止时间：<i>00000</i></li>
          </ul>
        </div>
        <div class="logo">作业</div>
      </div>
      <div><p>已完成</p></div>
    </div>
    <div class="right">
      <div v-if="true">
        <h2>10</h2>
        <span>得分</span>
      </div>
      <div v-else>
        <el-button type="primary">开始作业</el-button>
      </div>
    </div>
  </div>

  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="30%"
    :before-close="handleClose"
  >
    <span>温馨提示</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">退出</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "WorkItem",

  data() {
    return {
      dialogVisible:false
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style scoped>
.box {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 16rem 1rem 1rem;
}
h4 {
  margin-top: 1rem;
}
.left {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-right: 0.125rem solid rgb(197, 195, 195);
  padding: 0 3rem;
}
.left ul {
  display: flex;
  margin-top: 1rem;
  font-size: 0.75rem;
  color: rgb(126, 125, 125);
}
.left ul li {
  margin: 0 0.2rem;
}
.right span {
  font-size: 0.75rem;
  font-weight: 500;
}
.logo {
  position: absolute;
  left: 0.6rem;
  top: 0.2rem;
  border: 0.0625rem solid #fcca00;
  color: #fcca00;
  font-size: 0.75rem;
  padding: 0.1rem;
}
</style>
